<template>
	<view class="follow_box">
		<view class="box_fir">
			<view class="top_box">
				<view class="top_title">基本信息</view>
			</view>
			<view class="fl_row">
				<view class="fl_col">
					<view class="label">家长姓名：</view>
					<view class="value">张三</view>
				</view>
				<view class="fl_col">
					<view class="label">联系方式：</view>
					<view class="value">17352848891</view>
				</view>
			</view>
			<view class="fl_row">
				<view class="fl_col">
					<view class="label">关系：</view>
					<view class="value">爸爸</view>
				</view>
				<view class="fl_col">
					<view class="label">宝宝姓名：</view>
					<view class="value">张三</view>
				</view>
			</view>
			<view class="fl_row">
				<view class="fl_col">
					<view class="label">宝宝性别：</view>
					<view class="value">男</view>
				</view>
				<view class="fl_col">
					<view class="label">宝宝月龄：</view>
					<view class="value">12</view>
				</view>
			</view>
			<view class="fl_row_no">
				<view class="label">出生年月：</view>
				<view class="value">2024-11-11</view>
			</view>
			<view class="fl_row_no">
				<view class="label">家庭住址：</view>
				<view class="value">湖南省长沙市雨花区香樟路255号</view>
			</view>
		</view>
		<view class="box_sec">
			<view class="top_box">
				<view class="top_title">到访记录</view>
			</view>
			<view class="info_list">
				<view class="info_item" v-for="(item,index) in infolist" :key="index">
					<view class="item_top">
						<view class="item_avatar">
							<u-avatar :src="src" mode="circle" :size="52"></u-avatar>
							<view class="name">张三分</view>
						</view>
						<view class="time">
							2024-12-27 10：34
						</view>
					</view>
					<view class="item_bottom" :style="infolist.length===index+1? 'border:none':''">
						<view class="item_gray">
							<view class="item_row">
								<view class="label">跟进方式：</view>
								<view class="value">电话</view>
							</view>
							<view class="item_row">
								<view class="label">跟进内容：</view>
								<view class="value">目前还在观望中，对学习环境、教学质量比较关注已添加客户微信</view>
							</view>
							<view class="item_row">
								<view class="label">下次跟进时间：</view>
								<view class="value">2024-12-27</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 166rpx;width: 100%;"></view>
		<view class="btn_box">
			<u-button type="warning" shape="circle" class="from_sub" @click="pickerTime1=true">转为线索</u-button>
			<u-button type="warning" shape="circle" class="from_sub" @click="pickerTime2=true" plain>移交</u-button>
		</view>
		<u-picker mode="selector" v-model="pickerTime1" :default-selector="[0]" @confirm="(e)=>timeConfirm(e,'xs')"
			:range="selector1" range-key="name"></u-picker>
		<u-picker mode="selector" v-model="pickerTime2" :default-selector="[0]" @confirm="(e)=>timeConfirm(e,'uj')"
			:range="selector2" range-key="name"></u-picker>

		<u-action-sheet :tips="tips" :list="selectlist" v-model="showSex" @click="actionSheetCallback"></u-action-sheet>
		<!-- 提示 -->
		<u-toast ref="uToast" />
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selector1: [{
					name: '张三',
					id: 1
				}, {
					name: 'lisi',
					id: 2
				}, {
					name: 'wangwu1',
					id: 3
				}],
				selector2: [{
					name: '张1三',
					id: 1
				}, {
					name: 'lis2i',
					id: 2
				}, {
					name: 'wang3wu1',
					id: 3
				}],
				infolist: [1, 2, 3],
				src: '',
				radioList: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				action: 'http://www.example.com/upload',
				fileList: [], // 初始值
				pickerTime1: false, //线索
				pickerTime2: false, //移交
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					timestamp: false,
				},
				tips: {

					text: '请选择性别',

					color: '#909399',

					fontSize: 24

				},
				showSex: false,
				selectlist: [{
						text: '男'
					},
					{
						text: '女'
					}
				],
				form: {
					title: '',
					address: '',
					class: '',
					birthdate: '',
					remark: ''
				},
			}
		},
		methods: {
			timeConfirm(e, type) {
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.from_sub {
		margin-top: 30rpx;
		width: 40%;
	}

	.btn_box {
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		bottom: 0px;
		display: flex;
		justify-content: space-evenly;
		width: 100%;
		background: #fff;
		left: 0;
		align-items: center;
		padding-bottom: 38rpx;
	}

	.follow_box {
		margin: 32rpx;
		padding: 32rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.box_fir {
			border-bottom: 2rpx dashed #EDEEF0;
			padding-bottom: 20rpx;

			.top_box {
				margin-bottom: 20rpx;

				.top_title {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					border-left: 6rpx solid #FF8B00;
					/* padding: 8rpx; */
					padding-left: 15rpx;
					line-height: 13px;
				}
			}
		}

		.box_sec {
			margin-top: 30rpx;

			.info_list {
				width: 100%;

				.info_item {
					.item_bottom {
						padding-left: 60rpx;
						padding-top: 22rpx;
						border-left: 2px solid #FF8B00;
						margin-left: 25rpx;
						padding-bottom: 34rpx;

						.item_gray {
							background: #F7F7F7;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
							padding: 32rpx;

							.item_row {
								display: flex;
								margin: 10rpx 0rpx;

								.label {
									font-weight: 400;
									font-size: 28rpx;
									color: #999999;
									width: 220rpx;
								}

								.value {
									width: 300rpx;
									font-weight: 400;
									font-size: 28rpx;
									color: #666666;
								}
							}
						}
					}

					.item_top {
						margin-bottom: -8rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.item_avatar {
							display: flex;
							align-items: center;

							.name {
								margin-left: 34rpx;
								font-weight: bold;
								font-size: 32rpx;
								color: #333333;
							}
						}

						.time {
							font-weight: 400;
							font-size: 28rpx;
							color: #999999;
						}
					}
				}
			}

			.top_box {
				margin-bottom: 20rpx;

				.top_title {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					border-left: 6rpx solid #FF8B00;
					/* padding: 8rpx; */
					padding-left: 15rpx;
					line-height: 13px;
				}
			}
		}

		.fl_row_no {
			margin: 30rpx 0rpx;
			display: flex;
			align-items: center;

			.label {
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}

			.value {
				font-weight: 400;
				font-size: 28rpx;
				color: #333;
			}
		}

		.fl_row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 30rpx 0rpx;

			.fl_col {
				display: flex;
				flex: 1;

				.label {
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}

				.value {
					font-weight: 400;
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}
</style>